<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品详情</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/plugin/animate/css/animate.min.css" />
		<link rel="stylesheet" href="style/plugin/layui/css/layui.css" />
		<link rel="stylesheet" href="style/css/product_details.css" />	
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/mockjs/dist/mock.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/vue-resource.js"></script>
		<script type="text/javascript" src="style/plugin/layui/layui.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
		<style>
			.recmsg{
				position:fixed;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin:auto; 
				z-index: 20;
				background:#FFF;
				width:70%;
				height:50%;
			}
			.recmsg div{
				width:90%;
				margin:0 auto;
				padding:5px 15px;
			}
			.recmsg input{
				height:30px;
				border:1px solid #848484 !important;
				background:#CCCCCC			
			}
			.bt1{
				background:#1E9FFF;
				margin:15px;
				color:#fff;
				display:inline-block;
				padding:4px 6px;
				border-radius: 4px;
			} 
			.bt2{
				background:#EB7350;
				margin:15px;
				color:#fff;
				display:inline-block;
				padding:4px 6px;
				border-radius: 4px;
			}
		</style>
	</head>

	<body>
		<div id="prodel">
			<div id="header">
				<h1>产品详情</h1>
				<span class="backicon"></span>
			</div>
			<div class="body">
				<div class="product_img">
					<img :src="htp+proMsg.thumb_pic" v-if="proMsg!=''">
				</div>
				<div class="product_info">
					<span class="title">产品名称：{{proMsg.title}}</span>
					<span class="score">积分：{{proMsg.price}}</span>
					<span>库存：<em>{{proMsg.stock}}{{proMsg.unit}}</em></span>
					<div class="sku_num clearfix">
						<em>数量：</em>
						<div class="num_wrap">
							<span class="minus" @tap="reduce"></span>  
							<input class="num" type="tel" v-model="num" readonly="readonly"/>
							<span class="plus" @tap="plus"></span>
						</div>
					</div>
	
				</div>
				<div class="content">
					<p v-html="proMsg.intro"></p>
					<!--<p>(2) 服务使用：{{proMsg.product_use}}</p>
					<p>(3) 服务期限：{{proMsg.product_time_limit}}</p>-->
				</div>
			</div>
			<div class="exchange maxwidth">
		 		<!--<a href="cart.html" class="shopping_cart">
					购物车
					<span class="cart_num animated bounceInDown">0</span>
				</a> 
	
				<a href="javascript:void(0);" class="add_cart">加入购物车</a>-->
				<a href="javascript:;" class="exchange_btn" style="text-align:center;width:100%;font-size:16px" @tap="duihuan">立即兑换</a>
			</div>
			<div class="mask" v-if="pflag"></div>
			<div class="recmsg" v-if="pflag">
				<div><label for="recman">收货人</label><input type="text" id="recman" v-model="recman"/></div>
				<div><label for="rectel">收货人电话</label><input type="text" id="rectel" v-model="rectel"/></div>
				<div><label for="recaddr">收货地址</label><input type="text" id="recaddr" v-model="recaddr"/></div>
				<div><label for="beizhu">订单备注</label><input type="text" id="beizhu"/ v-model="beizhu"></div>
				<button class="fl bt1" @tap="quxiao">取消</button> 
				<button class="fr bt2">确定</button>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#prodel",
			data:{
				proMsg:"",
				num:1,
				pId:"",
				pflag:false,
				recman:"",
				rectel:"",
				recaddr:"",
				beizhu:"",
				htp:"",
				ticket:"",
				sign:""
			},
			methods:{
				reduce:function(){
	    			this.num--;
	    			if(this.num<=1){
	    				this.num=1
	    			}
	    		},
	    		plus:function(){ 
	    			this.num++;
	    			if(this.num>=this.proMsg.stock){
	    				this.num=this.proMsg.stock 
	    			}
	    		},
	    		duihuan:function(){
	    			var arr=[];
	    			var obj={};
	    			var arr2=[];
	    			var obj2={};
	    			obj.good_no=this.pId;
	    			obj.num=this.num
	    			obj2.title=this.proMsg.title
	    			obj2.price=this.proMsg.price
	    			obj2.img=this.proMsg.thumb_pic
	    			obj2.num=this.num
	    			arr.push(obj)
	    			arr2.push(obj2)
	    			arr= JSON.stringify(arr)
	    			arr2=JSON.stringify(arr2)
	    			localStorage.setItem("pcanshu",arr)
	    			localStorage.setItem("pgoodmsg",arr2) 
	    			openurl("product_settle")
	    		}
//	    		quxiao:function(){
//	    			this.pflag=false
//	    		}, 
//	    		alertmsg:function(){
//	    			this.pflag=true
//	    		}
			},
			created:function(){
				var that=this
				that.ticket=localStorage.getItem("tick")
                that.sign=localStorage.getItem("sig")
				that.htp=domain2
				console.log(that)
				mui.plusReady(function(){
				    that.pId=plus.webview.currentWebview().current;
				    that.$http.post(domain+"/score_good/getInfo?t="+that.ticket+"&sign="+that.sign,{
				    	good_no:that.pId
				    },{emulateJSON:true}).then(
			            function (res) {
			                // 处理成功的结果
			                if(res.body.code==1){
			                  console.log(res.body)	
			                  that.proMsg=res.body.data;
			                } 
			            },function (res) {
			            // 处理失败的结果
			            console.log(res) 
			            }
			        );
				})
				
			},
		})
		
		
//		$(function() {
//			layui.use('layer', function() {
//				var layer = layui.layer;
//			});
//			var num = 1
//
//			$(".add_cart").click(function() {
//				num = num + 1
//				$(".cart_num").removeClass("bounceInLeft")
//				setTimeout(function() {
//					$(".cart_num").addClass('bounceInLeft');
//				}, 0)
//
//				$(".cart_num").html(num - 1)
//				layer.msg('加入购物车成功');
//				$(".cart_num").show()
//			})
//
//		})
	</script>

</html>